<template>
	<view>
		<view class="news_cont py-2" :class="favorite ? 'mb-2 bg-white px-2' : 'm_border'" v-for="(item, index) of list" :key="item.id" @click="toDetail(item)">
			<view :class="{ news_row: (item.imglist.length == 1 || item.thumb) && !item.url }">
				<view class="flex flex-column justify-between">
					<view class="news_text font-md text_hidden2">{{ item.title }}</view>
					<view class="news_time font" v-if="(item.imglist.length == 1 || item.thumb) && !item.url">
						<text v-if="index < 2 && item.platform && catId == 0" class="bg_main text-white px-1">置顶</text>
						<text>{{ item.source || '' }}</text>
						<text>{{ item.create_at || item.time }}</text>
					</view>
				</view>
				<!-- 视频 -->
				<view class="mt-1" v-if="item.type == 1 && item.url" @click.stop>
					<video id="newVideo" class="w-100 rounded_15" :src="item.url" :poster="item.img_path" style="height: 400rpx;"></video>
				</view>
				<!-- 直播 -->
				<view class="mt-1" v-else-if="item.type == 2 && item.url"><video :src="item.url"></video></view>
				<view class="" v-else>
					<view class="ml-2" v-if="(item.imglist.length == 1 || item.thumb) && !item.url">
						<image v-if="item.thumb" class="small_img r_img" :src="item.thumb" mode="scaleToFill"></image>
						<image v-else class="b_img r_img" :src="item.imglist[0]" mode="aspectFill"></image>
					</view>
					<view class="w-100 flex justify-between mt-2" v-else-if="item.imglist.length == 3">
						<image v-for="(imgItem, index) of item.imglist" :key="index" class="small_img r_img" :src="imgItem" mode="aspectFill" style="width: 215rpx;"></image>
					</view>
				</view>
			</view>
			<view class="news_time font mt-1" v-if="item.imglist.length !== 1 || item.url">
				<text v-if="index < 2 && item.platform && catId == 0" class="bg_main text-white px-1">置顶</text>
				<text>{{ item.source || '' }}</text>
				<text>{{ item.create_at || item.time }}</text>
			</view>
			<!-- 底部点赞/收藏/转发操作栏 -->
			<view class="news_footer mt-2" v-if="favorite" @click.stop>
				<favorite-bottom :numdata="item.new_operate" :new-id="item.new_id" :type="item.type" :platform="item.platform"></favorite-bottom>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/common/js/util.js';
import favoriteBottom from '@/components/favorite_bottom/favorite_bottom.vue';
export default {
	props: ['list', 'catId', 'exhibitionId', 'favorite'],
	components: { favoriteBottom },
	data() {
		return {
			videoContext: null
		};
	},
	computed: {
		timeDate() {
			return function(val) {
				return util.getDateBeforeNow(val);
			};
		}
	},
	watch: {
		list: {
			handler(newV, oldV) {
				// console.log('new==', newV);
			}
		}
	},
	created() {
		this.videoContext = uni.createVideoContext('newVideo');
	},
	methods: {
		// 去详情
		toDetail(val) {
			let id = this.favorite ? val.new_id : val.id; //我的收藏进入详情传递的id更换
			if (val.type == 1) {
				uni.navigateTo({
					url: '/subPages/home/video/video_detail?id=' + id
				});
				this.videoContext.pause();
			} else if (val.type == 2) {
				// 跳转视频号直播
				util.channelsLice(val.start_time, val.end_time);
			} else {
				uni.navigateTo({
					url: '/subPages/exhibition/news/detail?id=' + id + '&exhibitionId=' + this.exhibitionId + '&platform=' + val.platform
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.news_row {
	display: flex;
	justify-content: space-between;
}
.news_cont {
	display: block !important;
}
.m_border {
	border-bottom: 1px solid #efefef;
}

// .news_cont:first-child {
// 	margin-top: 10rpx;
// }
.news_left {
	padding-right: 20rpx;
}
.news_text {
	color: $color3;
	font-size: 32rpx;
	line-height: 48rpx;
}

.news_time {
	color: $color8;
	font-size: 24rpx;
	line-height: 50rpx;

	text {
		margin-right: 20rpx;
	}
}
::v-deep ._img {
	width: 224rpx;
	height: 133rpx;
	border-radius: 15rpx;
}
::v-deep image {
	width: 224rpx;
	height: 133rpx !important;
	border-radius: 15rpx;
}
.news_footer {
	border-top: 2px solid #efefef;
}
</style>
